<template>
  <div class="calendarList flex-column g-box g-inside" :class="{ 'eleFull': isEleFull }">
    <div class="flex-hd">
      <div class="mb10">
        <slot name="formList"></slot>
      </div>
      <div class="toolbarList mb10">
        <div class="left">
          <slot name="toolbarLeft">
            <slot name="toolbarLeftStart"></slot>
            <el-button type="info" size="mini" icon="el-icon-upload2" v-if="options.import"
              v-hasPermi="options.import.auth" @click="options.import.click">{{options.import.name || '导入' }}</el-button>
            <el-button type="warning" size="mini" icon="el-icon-download" v-if="options.export"
              v-hasPermi="options.export.auth" @click="options.export.click">{{options.export.name || '导出' }}</el-button>
            <slot name="toolbarLeftEnd"></slot>
          </slot>
        </div>
        <div class="center">
          <slot name="toolbarCenter">
            <slot name="toolbarCenterStart"></slot>
            <i class="el-icon-arrow-left" @click="onMonth('prev')"></i>
            <el-date-picker
              size="mini"
              v-model="serchParams.yearMonth"
              type="month"
              placeholder="选择月"
              :clearable="false"
              format="yyyy-MM" 
              value-format="yyyy-MM"  
              style="width: 140px; margin: 0 5px;"
              @change="onMonth('month')">
            </el-date-picker>
            <i class="el-icon-arrow-right" @click="onMonth('next')"></i>
            <slot name="toolbarCenterEnd"></slot>
          </slot>
        </div>
        <div class="right">
          <slot name="toolbarRight">
            <slot name="toolbarRightStart"></slot>
            <ScreenFull :isEleFull.sync="isEleFull" />
            <slot name="toolbarRightEnd"></slot>
          </slot>
        </div>
      </div>
    </div>
    <div class="flex-bd">
      <el-calendar v-loading="options.loading" v-model="serchParams.yearMonth">
        <template
          slot="dateCell"
          slot-scope="{date, data}">
          <div class="data-content" @click.stop="onCellClick(data)">
            <div class="time">{{ data.day.slice(-2) }}</div>
            <slot name="dateCell" :data="data"></slot>
          </div>
        </template>
      </el-calendar>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import ScreenFull from '@/components/Common/ScreenFull'
export default {
  name: "CalendarList",
  components: {
    ScreenFull
  },
  props: ['options', 'serchParams'],
  data() {
    return {
      isEleFull: false
    };
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    onMonth(type){
      if(type === 'prev'){
        this.serchParams.yearMonth = dayjs(this.serchParams.yearMonth).subtract(1, 'month').format('YYYY-MM')
      }else if(type === 'next'){
        this.serchParams.yearMonth = dayjs(this.serchParams.yearMonth).add(1, 'month').format('YYYY-MM')
      }
      this.$parent.getList()
    },
    onCellClick(data){
      // this.serchParams.yearMonth = data.day
      this.$emit('onCellClick', data)
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep{
  .el-calendar{
    height: 100%;
  }
  .el-calendar__header{
    display: none;
  }
  .el-calendar__body{
    height: 100%;
    padding: 0;
    thead{
      background: #F3F5F6;
      th{
        font-weight: bold;
        font-size: 18px;
      }
    }
    .el-calendar-table{
      height: 100%;
    }
    tbody{
      height: calc(100% - 47px);
    }
    tr{
      height: 16.66%;
    }
    td.prev,
    td.next{
      pointer-events: none;
    }
    td.current .el-calendar-day:hover{
      background: #e6eef7;
    }
    td.is-selected{
      background: none;
    }
    .el-calendar-day{
      position: relative;
      height: 100%;
      padding: 0;
      .data-content{
        position: relative;
        height: 100%;
        padding: 8px;
      }
      cursor:auto;
      .el-icon-edit{
        position: absolute;
        right: 8px;
        top: 8px;
        display: none;
        cursor: pointer;
      }
      &:hover .el-icon-edit{
        display: block;
      }
    }
  }
  .el-icon-arrow-left,
  .el-icon-arrow-right{
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    height: 28px;
    line-height: 28px;
  }
}
</style>